<script>
import Vue from "vue";
import VCharts from "v-charts";
// import { getHistogramData } from "@/api/actual";
// import { getLineData } from "@/api/actual";
// import { getPieData } from "@/api/actual";

Vue.use(VCharts);
export default {
  name: "AdminDashboard",
  data() {
    return {
      histogramChartData: {
        columns: [], //   "部门中心","培训次数","总课时","总人时数"
        rows: []
      },

      //   histogramChartSettings: {
      //     metrics: [ "直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎", "百度", "谷歌", "必应", "其他" ],
      //     dimension: ["日期"],
      //     stack: {
      //       广告: ["邮件营销", "联盟广告", "视频广告"],
      //       搜索引擎: ["百度", "谷歌", "必应", "其他"]
      //     }
      //   },
      histogramChartMarkLine: {
        data: [[{ type: "min" }, { type: "max" }]]
      },
      lineChartData: {
        columns: [], //"月份","客运营销中心","调度中心","物资部","车辆中心","工务通号中心","供电机电中心"
        rows: [
          // {"月份":"4月份","客运营销中心":5,"调度中心":7,"物资部":9,"车辆中心":2,"工务通号中心":5,"供电机电中心":3},
          // {"月份":"5月份","客运营销中心":6,"调度中心":8,"物资部":10,"车辆中心":3,"工务通号中心":7,"供电机电中心":5}
        ]
      },
      lineChartSettings: {
        metrics: [], //"客运营销中心","调度中心","物资部","车辆中心","工务通号中心","供电机电中心"
        dimension: [] //"月份"
      },
      lineChartMarkPoint: {
        data: [{ name: "最大值", type: "max" }]
      },
      pieChartData: {
        columns: [],
        rows: []
      },
      pieChartSettings: {
        dimension: "培训类别",
        metrics: "培训数量"
      },
      ringChartData: {
        columns: ["日期", "成本", "利润"],
        rows: [
          {
            日期: "1月1号",
            成本: 123,
            利润: 3
          },
          {
            日期: "1月2号",
            成本: 1223,
            利润: 6
          },
          {
            日期: "1月3号",
            成本: 2123,
            利润: 90
          },
          {
            日期: "1月4号",
            成本: 4123,
            利润: 12
          },
          {
            日期: "1月5号",
            成本: 3123,
            利润: 15
          },
          {
            日期: "1月6号",
            成本: 7123,
            利润: 20
          }
        ]
      },
      ringChartSettings: {
        dimension: "成本",
        metrics: "利润"
      },
      funnelChartData: {
        columns: ["状态", "数值"],
        rows: [
          { 状态: "展示", 数值: 900 },
          { 状态: "访问", 数值: 600 },
          { 状态: "点击", 数值: 300 },
          { 状态: "订单", 数值: 100 }
        ]
      },
      liquidfillChartData: {
        columns: ["sign", "percent"],
        rows: [
          {
            sign: "",
            percent: 0.2
          }
        ]
      }
    };
  },
  created: function() {
    this.histogramData();
    this.lineData();
    this.pieData();
  },
  methods: {
    histogramData() {
      //   this.$store.dispatch("openLoading");
      getHistogramData().then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          //   console.log("response.data.item", response.data.item);
          this.histogramChartData.columns = response.data.columns;
          // console.log(response.data.columns);
          for (var x of response.data.item) {
            this.histogramChartData.rows.push(x);
          }
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        // this.$store.dispatch("closeLoading");
      });
    },
    lineData() {
      //   this.$store.dispatch("openLoading");
      // console.log("getLineData");
      getLineData().then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          //   console.log("response.data.item", response.data.item);
          this.lineChartData.columns = response.data.columns;
          // console.log("this.response.data.item.res",response.data.item.res)
          // console.log(response.data.columns.length);
          for (var i = 0; i < response.data.columns.length; i++) {
            if (i === 0) {
              this.lineChartSettings.dimension.push(response.data.columns[i]);
            } else {
              this.lineChartSettings.metrics.push(response.data.columns[i]);
            }
          }
          for (var x of response.data.item) {
            this.lineChartData.rows.push(x);
          }
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        // this.$store.dispatch("closeLoading");
      });
    },
    pieData() {
      //   this.$store.dispatch("openLoading");
      getPieData().then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.pieChartData.columns = response.data.columns;
          for (var x of response.data.item) {
            this.pieChartData.rows.push(x);
          }
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        // this.$store.dispatch("closeLoading");
      });
    }
  }
};
</script>

<template>
  <el-main>
    <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="p20-scrollbar__view">
      <el-row :gutter="20">
        <!-- <el-col :span="12" class="echarts-item"> -->
          <div class="content-title">各中心培训基本情况</div>
          <ve-histogram :data="histogramChartData" ></ve-histogram>
          <!--:settings="histogramChartSettings" :mark-line="histogramChartMarkLine" -->
        <!-- </el-col> -->
        <!-- <el-col :span="12" class="echarts-item"> -->
          <div class="content-title">各中心培训人均课时</div>
          <ve-line :data="lineChartData" :settings="lineChartSettings" :mark-point="lineChartMarkPoint"></ve-line>
        <!-- </el-col> -->
        <el-col :span="12" class="echarts-item">
          <div class="content-title">分公司培训类别比例</div>
          <ve-pie :data="pieChartData" :settings="pieChartSettings"></ve-pie>
        </el-col>
        <!-- <el-col :span="12" class="echarts-item">
          <div class="content-title">环形图</div>
          <ve-ring :data="ringChartData" :settings="ringChartSettings"></ve-ring>
        </el-col> 
        <el-col :span="8" class="echarts-item">
            <div class="content-title">漏斗图</div>
            <ve-funnel :data="funnelChartData"></ve-funnel>
        </el-col>
        <el-col :span="8" class="echarts-item">
            <div class="content-title">签到率</div>
            <ve-liquidfill :data="liquidfillChartData"></ve-liquidfill>
        </el-col> -->
      </el-row>
    </el-scrollbar>
  </el-main>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  padding: 10px 10px;
  font-size: 22px;
  color: #1f2f3d;
}
</style>
